<template>
  <!-- 男女比例 -->
  <div class="BGQXStatistic-main">
    <!-- <div class="BGQXStatistic-header">
      <div class="man">
        <span>男士</span>
        <img src="../images/man.png" alt="" />
      </div>
      <div class="woman">
        <span>女士</span>
        <img src="../images/woman.png" alt="" />
      </div>
    </div> -->
    <!-- echarts -->
    <div class="echarts" id="BGQXStatisticChart"></div>
  </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
interface ChartProp {
  name: string;
  value: number;
}
const initChart = (data: ChartProp): ECharts => {
  const charEle = document.getElementById("BGQXStatisticChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  const option: EChartsOption = {
    title: {
      text: ""
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    legend: {
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: { color: "#fff" }
    },
    yAxis: {
      type: "category",
      data: data.map((v: any) => v.name),
      axisLabel: { color: "#fff" }
    },
    series: [
      {
        name: "2011",
        type: "bar",
        data: data.map((v: any) => v.value)
      }
    ]
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart
});
</script>
<style lang="scss" scoped>
.BGQXStatistic-main {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
